<template>
  <div :class="ns.b()">
    <div :class="ns.e('header')"></div>
    <div :class="ns.e('body')" ref="canvas"></div>
    <div :class="ns.e('footer')"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { useNamespace } from "@mdfe/medi-ui";
import { init } from "echarts";
import bIZuJianWH from "@/api/bIZuJianWH";
import { transModelToBarData } from "@/views/zuJianSJ/components/widgetType/bar";
import elementResizeDetectorMaker from "element-resize-detector";

defineOptions({
  name: "mic-bar-block",
});

const props = defineProps({
  widgetStyle: Object,
  isComp: {
    type: Boolean,
    default: false,
  },
  widget: Object,
});

const ns = useNamespace("bi-bar-block");

const emit = defineEmits(["set", "EchartClick"]);

let instance = null;
const canvas = ref();

const style = ref();
const seriesOption = ref();

const erd = elementResizeDetectorMaker();

let resizeListener = null;
async function search(id, data) {
  data.zuJianTBLX = 1;

  try {
    const res = await bIZuJianWH.generateDataList({
      gongChengSJJID: id,
      zuJianNR: JSON.stringify(data),
    });
    if (res.data) {
      const index = res.fieldList.findIndex((item) => {
        return item.ziDuanMC === data.xuanZhongZBList?.[0]?.ziDuanMC;
      });
      const obj = {
        series: [],
        xAxis: [],
      };
      res.fieldList.forEach((item, i) => {
        if (i < index || index == -1) {
          obj.xAxis.push({
            type: "category",
            // prettier-ignore
            data: res.data[i],
          });
        } else {
          obj.series.push({
            type: "bar",
            name: item.ziDuanMC,
            data: res.data[i],
          });
        }
      });
      instance.setOption(obj);
    }
  } catch (e) {
    console.error(e);
  }
}
function setOption(options) {
  if (!options) return;
  style.value = options;
  const { series } = instance.getOption();
  const obj = transModelToBarData(options);
  seriesOption.value = Object.assign({}, seriesOption.value, obj.series);
  const newSeries = series.map((item) => {
    return Object.assign({}, item, seriesOption.value);
  });
  obj.series = newSeries;
  instance.setOption(obj);
}

onMounted(() => {
  nextTick(() => {
    instance = init(canvas.value);

    // 指定图表的配置项和数据

    style.value = props.widgetStyle || {};
    seriesOption.value = {};
    instance.setOption({
      xAxis: {
        type: "category",
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          type: "bar",
        },
      ],
    });

    emit("set", true);

    instance.on("click", (params) => {
      emit("EchartClick", { echart: params, widget: props.widget });
    });

    if (props.isComp && props.widget) {
      search(props.widget.gongChengSJJID, props.widget);
      setOption(props.widget.styleConfig);

      resizeListener = erd.listenTo(canvas.value, () => {
        instance.resize();
      });
    }
  });
});

onBeforeUnmount(() => {
  if (resizeListener) {
    erd.uninstall(canvas.value);
  }
  instance.off("click");
});

defineExpose({
  search,
  setOption,
  widget: props.widget,
});
</script>

<style lang="scss" scoped>
@include c("bi-bar-block") {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  @include e("header") {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: var(--md-spacing-2);
  }
  @include e("label") {
    color: #222;
    font-size: var(--md-font-3);
  }
  @include e("body") {
    flex: 1;
  }
}
</style>
